<template>
  <div>
    <Nav />
    <div class="part-head w">
      <div class="page" @click="pageLeft">
        <span><</span>
      </div>
      <div class="page-middle">
        <div v-for="(src, index) in this.imagesList" :class="index === chooseIndex ? 'choose-class' : 'single'"
             @click="changeIndex(index)"
        >
          <img :src="src" alt="" class="image-class">
        </div>
      </div>
      <div class="page" @click="pageRight">
        <span>></span>
      </div>
    </div>

    <LeftOrRight
        :leftOrRight="leftOrRight"
        :images="imageUrl"
        :text="textUrl"
    >
    </LeftOrRight>
    <Footer></Footer>
  </div>
</template>

<script>
import LeftOrRight from "@/components/LeftOrRight";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import { imageList, more, moreShowImageList, textMore, showImageList, textInfo } from "@/websiteData/customerCase_data";

export default {
  name: "CustomerCase",
  components: { Footer, Nav, LeftOrRight },
  data() {
    return {
      leftOrRight: "left",
      imageUrl: showImageList[0],
      textUrl: textInfo[0],

      imagesList: imageList,
      more: more,

      showImageList: showImageList,
      moreShowImageList: moreShowImageList,

      textInfo: textInfo,
      textMore: textMore,

      urlList: [],
      activeName: 'second',
      chooseIndex: 0,
      resultLength: 2,
      resultLengthMark: 2,
      totalInfo: 10
    }
  },

  methods: {
    pageLeft() {
      this.chooseIndex = (this.chooseIndex - 1) > 0 ? --this.chooseIndex : 0

      let img = this.imagesList[this.imagesList.length - 1]
      let showImage = this.showImageList[this.showImageList.length - 1]
      let oneTextInfo = this.textInfo[this.textInfo.length - 1]

      if (this.more.length > 2) {
        this.showArrayUnshift()

        if (this.imagesList.length > 8) {
          this.showArrayPushAndPop(img, showImage, oneTextInfo)
        }

        this.moreArrayShift()
        this.chooseIndex++
      } else {
        if (this.resultLength < 2) {
          this.showArrayPushAndPop(img, showImage, oneTextInfo)
          this.showArrayUnshift()
          this.moreArrayShift()
          this.resultLength++
          this.chooseIndex++
        }
      }

      this.imageUrl = this.showImageList[this.chooseIndex]
      this.textUrl = this.textInfo[this.chooseIndex]
    },

    showArrayPushAndPop(img, showImage, oneTextInfo) {
      this.imagesList.pop()
      this.showImageList.pop()
      this.textInfo.pop()

      this.more.push(img)
      this.moreShowImageList.push(showImage)
      this.textMore.push(oneTextInfo)
    },

    showArrayUnshift() {
      this.imagesList.unshift(this.more[0])
      this.showImageList.unshift(this.moreShowImageList[0])
      this.textInfo.unshift(this.textMore[0])
    },

    moreArrayShift() {
      this.more.shift()
      this.moreShowImageList.shift()
      this.textMore.shift()
    },

    pageRight() {
      this.chooseIndex = (this.chooseIndex + 1) > (this.imagesList.length - 1) ? this.imagesList.length - 1 : ++this.chooseIndex
      if (this.chooseIndex === 3 && this.imagesList.length === 4) {
        return
      }

      if (this.chooseIndex >= this.imagesList.length / 2) {
        if (this.resultLength !== 0) {
          this.imagesList.push(this.more[this.more.length - 1])
          this.showImageList.push(this.moreShowImageList[this.moreShowImageList.length - 1])
          this.textInfo.push(this.textMore[this.textMore.length - 1])

          this.resultLength--

          this.more.pop()
          this.moreShowImageList.pop()
          this.textMore.pop()
        }

        this.more.unshift(this.imagesList[0]);
        this.moreShowImageList.unshift(this.showImageList[0])
        this.textMore.unshift(this.textInfo[0])

        this.imagesList.shift()
        this.showImageList.shift()
        this.textInfo.shift()

        this.chooseIndex--
      }

      this.imageUrl = this.showImageList[this.chooseIndex]
      this.textUrl = this.textInfo[this.chooseIndex]
    },

    changeIndex(index) {
      if (this.chooseIndex === index) {
        return
      }

      let count = 0
      if (index !== 3) {
        count = index - 3
      }

      // 用来解决bug的变量
      let markResult = 0, equalResult = 0;
      let partIndex
      if (index <= 3) {
        count = this.chooseIndex - index
        // 对应前几项，点击时数组不需要移动的场景
        if (this.resultLength === 2) {
          partIndex = index
        } else {
          count = Math.abs(count)
          if (count > this.more.length) {
            markResult = count - this.more.length + this.resultLength;
          } else if (count === this.more.length && this.resultLength === 0) {
            if (count === 2) {
              equalResult = 1;
            }
          }

          for (let i = 0; i < count; i++) {
            let url = this.more[0]
            let showMore = this.moreShowImageList[0]
            let oneTextMore = this.textMore[0]

            if (this.more.length - this.resultLengthMark > 0) {
              this.imagesList.unshift(url)
              this.showImageList.unshift(showMore)
              this.textInfo.unshift(oneTextMore)

              // this.more.shift()
              this.moreArrayShift()
              partIndex = 3
            } else {
              if (index === 1) {
                partIndex = index + count - this.resultLength
                console.log("resultLength = ", this.resultLength)
                console.log('partIndex = ', partIndex)
              } else {
                partIndex = index + count
              }
              // partIndex = this.chooseIndex

              url = this.imagesList[this.imagesList.length - 1]
              showMore = this.showImageList[this.showImageList.length - 1]
              oneTextMore = this.textInfo[this.textInfo.length - 1]

              this.imagesList.pop()
              this.showImageList.pop()
              this.textInfo.pop()

              this.imagesList.unshift(this.more[0]);
              this.showImageList.unshift(this.moreShowImageList[0])
              this.textInfo.unshift(this.textMore[0])

              this.more.shift()
              this.moreShowImageList.shift()
              this.textMore.shift()

              this.more.push(url)
              this.moreShowImageList.push(showMore)
              this.textMore.push(oneTextMore)

              this.resultLength++
              if (this.resultLength === 2) {
                break
              }
            }
          }
        }
        this.chooseIndex = partIndex

        // 此时时more中的数量小于count
        if (markResult !== 0) {
          this.chooseIndex -= markResult;
        }
        // 此时more中的数量等于count
        if (equalResult !== -0) {
          this.chooseIndex += equalResult;
        }

        this.imageUrl = this.showImageList[this.chooseIndex]
        this.textUrl = this.textInfo[this.chooseIndex]
        return
      }

      if (count > 0) {
        for (let i = 0; i < count; i++) {
          let url = this.imagesList[0]
          let showMore = this.showImageList[0]
          let oneTextMore = this.textInfo[0]

          if (this.resultLength !== 0) {
            this.resultLength--;

            this.imagesList.push(this.more[this.more.length - 1])
            this.showImageList.push(this.moreShowImageList[this.moreShowImageList.length - 1])
            this.textInfo.push(this.textMore[this.textMore.length - 1])

            this.more.pop()
            this.moreShowImageList.pop()
            this.textMore.pop()
          }

          this.more.unshift(url)
          this.moreShowImageList.unshift(showMore)
          this.textMore.unshift(oneTextMore)

          this.imagesList.shift()
          this.showImageList.shift()
          this.textInfo.shift()
        }
        // this.resultLength = this.resultLength - count > 0 ? this.resultLength - count : 0
      }

      this.chooseIndex = 3

      this.imageUrl = this.showImageList[this.chooseIndex]
      this.textUrl = this.textInfo[this.chooseIndex]
    }
  }
}
</script>

<style scoped>
.head-box {
  height: 80px;
}

.head-nav {
  position: fixed;
  z-index: 99;
  width: 100%;
}

.page {
  flex: 0.02;
  padding-top: 90px;
}

.span-class {
  margin-top: 20px;
}

.single {
  /*flex: 1;*/
  height: 50%;
  /*margin: 30px auto 30px auto;*/
  margin-top: 50px;
  margin-left: 37px;
  border-radius: 50%;
  width: 100px;
  float: left;
}

.choose-class {
  height: 50%;
  margin-top: 50px;
  margin-left: 37px;
  border-radius: 50%;
  width: 100px;
  float: left;
  border: 2px solid #3A92E4;
}

.choose-class:hover {
  cursor: pointer;
}

.single:hover {
  cursor: pointer;
}

.image-class {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.page:hover {
  cursor: pointer;
}

.page-middle {
  flex: 0.96;
  transition: all .3s ease-out;
  /*display: flex;*/
  /*flex-direction: row*/
}

.part-head {
  display: flex;
  height: 200px;
}
</style>